<html>
  <head>
    <title>SIMILE Widgets | Exhibit | Examples | US Cities By Population</title>
    <link rel='stylesheet' href='../../api/styles/common.css' type='text/css' />
    
    <link href="cities.js" type="application/json" rel="exhibit/data" />
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js -->
    <script src="../../api/exhibit-api.js"></script>
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/2.2.0/extensions/map/map-extension.js -->
    <script src="../../api/extensions/map/map-extension.js?gmapkey=ABQIAAAA5JLLfCE9c7HAtg25QM2KCRRyiP6mHEsQpwvxB19-hS9Kgd8RYhSXEtJVAXDUCZPqwtZZi7-HUYUYrw"></script>
  </head>
  <body>
    <ul id="path">
      <li><img src="../../images/left_arrow_img.png" onclick="window.qml.showExampleChooser();"/></li>
      <li><input type="checkbox" onclick="window.qml.enableScroll(this.checked);"
		 class="flickable-checkbox"><span  onclick="(function() { var chk = SimileAjax.jQuery('input.flickable-checkbox')[0]; chk.click(); })();">Flickable??</span></input></li>
      <li><large>US Cities by Population</large></li>
    </ul>
<!--
    <div id="header">
      <h1>US Cities by Population</h1>
        <p style="width: 35em;">
            Using <a href="http://simile.mit.edu/exhibit/">Exhibit</a>, you can make this map
            with just the two simple files you see in <a href="./">this directory</a>.
            Could you have built the same map with as little effort using anything else?
        </p>
    </div>
-->
    <div id="content">
        <div ex:role="coder" ex:coderClass="SizeGradient" id="pop-coder"
           ex:gradientPoints="0, 10; 10000000, 100" >
        </div>
        <div ex:role="view"
            ex:viewClass="Map"
            ex:label="Cities"
            ex:latlng=".latlng"
            ex:sizeKey=".pop"
            ex:sizeCoder="pop-coder"
            ex:sizeLegendLabel="Population"
            ex:center="38.62756, -90.19896"
            ex:zoom="4"
            ex:mapHeight="500"
            ex:showHeader="false"
            >
            <div class="map-lens" ex:role="lens" style="display: none;">
                <div>#<span ex:content=".rank"></span>. <b ex:content=".label"></b></div>
                <div><span ex:content=".pop"></span> people</div>
            </div>
        </div>
    </div>
  </body>
</html>
